<!-- user表单弹窗 -->
<form id="user-form" lay-filter="user-form" class="layui-form model-form" xmlns:th="http://www.w3.org/1999/xhtml">
    <input name="id" type="hidden"/>
    <div class="layui-form-item">
        <label class="layui-form-label">所属公司<span style="color: red">*</span></label>
        <div class="layui-input-block">
            <select name="companyId" lay-search lay-verify="required">
                <option></option>
                <option th:each="company : ${companys}" th:value="${company.id}" th:text="${company.name}"></option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">所属部门<span style="color: red">*</span></label>
        <div class="layui-input-block">
            <select name="officeId" lay-search lay-verify="required">
                <option></option>
                <option th:each="office : ${offices}" th:value="${office.id}" th:text="${office.name}"></option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">账号<span style="color: red">*</span></label>
        <div class="layui-input-block">
            <input name="username" placeholder="请输入账号" type="text" class="layui-input" maxlength="20"
                   lay-verify="required" required/>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">用户名<span style="color: red">*</span></label>
        <div class="layui-input-block">
            <input name="nickName" placeholder="请输入用户名" type="text" class="layui-input" maxlength="20"
                   lay-verify="required" required/>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">手机号<span style="color: red">*</span></label>
        <div class="layui-input-block">
            <input name="phone" placeholder="请输入手机号" type="text" class="layui-input" lay-verify="required|phone"
                   required/>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">性别<span style="color: red">*</span></label>
        <div class="layui-input-block">
            <input type="radio" name="sex" value="男" title="男" checked/>
            <input type="radio" name="sex" value="女" title="女"/>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">角色<span style="color: red">*</span></label>
        <div class="layui-input-block">
            <select name="roles" xm-select="roles" lay-verify="required">
                <option th:each="role : ${roles}" th:value="${role.id}" th:text="${role.roleName}"></option>
            </select>
        </div>
    </div>
    <div class="layui-form-item model-form-footer">
        <button class="layui-btn layui-btn-primary" type="button" app-event="closeDialog">取消</button>
        <button class="layui-btn" lay-filter="user-form-submit" lay-submit>保存</button>
    </div>
</form>

<script>
    layui.use(['layer', 'admin', 'form', 'formSelects', 'jquery'], function () {
        const $ = layui.jquery;
        const layer = layui.layer;
        const admin = layui.admin;
        const form = layui.form;
        const formSelects = layui.formSelects;

        form.render('select');
        form.render('radio');

        let url = basePath + 'system/user/add';
        // 回显user数据
        const user = admin.getTempData('t_user');
        if (user) {
            $('input[name="username"]').attr('readonly', 'readonly');

            url = basePath + 'system/user/update';
            form.val('user-form', user);
            const rds = [];
            for (let i = 0; i < user.roles.length; i++) {
                rds.push(user.roles[i].id);
            }
            formSelects.value('roles', rds);
        }

        // 表单提交事件
        form.on('submit(user-form-submit)', function (data) {
            layer.load(2);
            $.post(url, data.field, function (data) {
                layer.closeAll('loading');
                if (data.success) {
                    layer.msg(data.msg, {icon: 1});
                    admin.finishPopupCenter();
                } else {
                    layer.msg(data.msg, {icon: 2});
                }
            });
            return false;
        });
    });
</script>